<!DOCTYPE html>
<html class="ui-page-login">

	<head>
		<meta charset="utf-8">
		<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
		<title></title>
		<link href="css/mui.min.css" rel="stylesheet" />
		<link href="css/style.css" rel="stylesheet" />
		<style>
			
			.area {
				margin: 20px auto 0px auto;
			}
			.mui-input-group:first-child {
				margin-top: 20px;
			}
			.mui-input-group label {
				width: 22%;
			}
			.mui-input-row label~input,
			.mui-input-row label~select,
			.mui-input-row label~textarea {
				width: 78%;
			}
			.mui-checkbox input[type=checkbox],
			.mui-radio input[type=radio] {
				top: 6px;
			}
			.mui-content-padded {
				margin-top: 25px;
			}
			.mui-btn {
				padding: 10px;
			}
			.mui-input-row label~input, .mui-input-row label~select, .mui-input-row label~textarea{
				margin-top: 1px;
			}
			.mui-bar-nav{
				background: #FE635F;
			}
			a{
			color:rgba(255,255,255,1);
			}
			.mui-title{
				color: rgba(255,255,255,1);
			}
			.mui-input-group{
				margin-top: 44px!important;
			}
			.mui-input-group:before{
				height: 0px;
			}
			.mui-input-group:after{
				height: 0px;
			}
			.mui-input-row{
				height: 54px!important;
			}
			.mui-input-group label{
				width: 30%;
				font-size: 15px;
				padding: 18px  15px;
			}
			.mui-input-row label~input, .mui-input-row label~select, .mui-input-row label~textarea{
				width: 70%;
				font-size: 15px;
				padding: 23px  15px;
			}
			
			.mui-input-group .mui-input-row:after{
				right: 15px;
			}
			
			.mui-input-group .mui-input-row:last-child:after{
				height: 0px;
			}
			
			.fasong{  
				position: absolute;	
				right: 15px;
				top: 10px;
			 padding: 8px  12px;
			  background:linear-gradient(76deg,rgba(252,126,119,1) 0%,rgba(254,96,93,1) 100%);
              border-radius:10px;
			  font-size: 15px;
			 color:rgba(255,255,255,1);
			}
			.yanzheng{
				 position: absolute;
				 width: 20px;
				 right: 130px;
				 top: 15px;
				 font-size: 15px;
			}
			#sendMail{
				border: none;
background:linear-gradient(180deg,rgba(252,126,119,1) 0%,rgba(254,96,93,1) 100%);
box-shadow:0px 5px 8px 0px rgba(254, 95, 99, 0.35);
border-radius:43px;
margin-top: 50px;
			}
			
		</style>
	</head>

	<body>
		<header class="mui-bar mui-bar-nav">
			<a class="mui-action-back mui-icon mui-icon-left-nav mui-pull-left"></a>
			<h1 class="mui-title">找回密码</h1>
		</header>
		<div class="mui-content">
			<form class="mui-input-group">
				
				<div class="mui-input-row">
					<label>账号</label>
					<input id='user' type="text" class="mui-input-clear mui-input" placeholder="请输入手机号码">
				</div>             	
               
				<div class="mui-input-row">
					<label>验证码</label>
					<input id='code' type="email" class="mui-input-clear mui-input" placeholder="验证码">
					<span class="yanzheng">60</span>
					<span  class="fasong">发送验证码</span>
				</div>
				
				<div class="mui-input-row">
					<label>重置密码</label>
					<input id='pwd' type="password" class="mui-input-clear mui-input" placeholder="请输入密码">
				</div>
				
				<div class="mui-input-row">
					<label>确认密码</label>
					<input id='confirm' type="password" class="mui-input-clear mui-input" placeholder="请确认密码">
				</div>
			</form>
			<div class="mui-content-padded">
				<button id='sendMail' class="mui-btn mui-btn-block mui-btn-primary">提交</button>
			</div>
		</div>
		<script src="js/mui.min.js"></script>
		<script src="js/app.js"></script>
		<script src="js/jquery-3.1.1.min.js"></script>
		<script src="js/MaoWenKe.js"></script>
		<script>
		mui.plusReady(function(){
			var url = plus.storage.getItem('url');
			var user = plus.storage.getItem('user');
			// user = JSON.parse(user);
			//发送验证码
			mui('.mui-input-row').on('tap','.fasong',function(){
				var phone = $('#user').val();
				if(!phone){
					mui.toast('请输入手机号码(账号)！');
					return;
				}
				mui.alert(phone)
				return
				var str = $(".yanzheng").text();
				
				if(str=='60'){
					plus.nativeUI.showWaiting();
					$.post(url+'/juyou/Passworder/get_code',{phone:phone},function(res){
						// console.log(res);
						// mui.alert(res.code);
						plus.nativeUI.closeWaiting();
						// mui.alert(res.data);
						mui.toast(res.msg);
						if(res.code==200){
							MaoWenKe.daojishi(function(number){
								if(number==0){
									$(".yanzheng").text(60)
								}else{
								$(".yanzheng").text(number)	
								}
								
							},60)
						}
					})
				}
			})
			
			
			mui('.mui-content-padded').on('tap','#sendMail',function(){
					document.activeElement.blur();
				var phone = $("#user").val();
				var code = $("#code").val();
				var pwd = $("#pwd").val();
				var confirm = $("#confirm").val();
				if(pwd!==confirm){
					mui.toast('确认密码错误!!');
					return;
				}
				// mui.alert(code)
				// return
				plus.nativeUI.showWaiting();
				$.post(url+'/juyou/passworder/changepwd',{phone:phone,code:code,pwd:pwd},function(res){
					plus.nativeUI.closeWaiting();
					if(res.code==200){
						mui.toast(res.msg);
						setTimeout(function(){
							mui.back();
						},1500)
					}else{
						mui.toast(res.msg);
					}
				})
			})
			
			
		})
			
		</script>
	</body>

</html>